<template>
  <q-scroll-area class="fit">
    <div class="q-pa-sm">
      <card-social icon_position="left" />
      <q-separator spaced inset vertical dark />
      <card-social icon_position="right" />

      <card-charts />

      <div class="row q-col-gutter-sm q-py-sm">
        <tab-social />
        <card-with-image />
      </div>

      <div class="row q-col-gutter-sm q-pb-sm">
        <todo-list />
        <card-time-line />
      </div>
      <table-visits />
    </div>
  </q-scroll-area>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from 'vue';

const CardSocial = defineAsyncComponent(
  () => import('components/cards/CardSocial.vue')
);
const CardCharts = defineAsyncComponent(
  () => import('components/cards/CardCharts.vue')
);
const TabSocial = defineAsyncComponent(
  () => import('components/tabs/TabSocial.vue')
);
const CardWithImage = defineAsyncComponent(
  () => import('components/cards/CardWithImage.vue')
);
const CardTimeLine = defineAsyncComponent(
  () => import('components/cards/CardTimeLine.vue')
);
const TodoList = defineAsyncComponent(
  () => import('components/list/TodoList.vue')
);
const TableVisits = defineAsyncComponent(
  () => import('components/tables/TableVisits.vue')
);
</script>
